<script>
import { data } from 'autoprefixer'
import routes from '../../router'
import axios, { AxiosError } from 'axios'

	export default {
        name:'Login',
		data() {
			return {
				overlaylong: 'overlaylong',
				overlaytitle: 'overlaytitle',
				username    	 : '',
				password		 : '',
				disfiex			 : 0,
				token:	'',
				formData: {
					username: '',
					password: '',
					repeatpassword: '',
					firstname: '',
					lastname: '',
					address: '',
					city	:'',
					phone: ''
				},
				usernameMsg:'',
				passwordMsg:'',
			}
			
		},
		methods: {
			Signin() {
				console.log("Signin...")
				this.overlaylong = "overlaylongleft"
				this.overlaytitle = "overlaytitleright"

					this.disfiex = 1
			},
			Signup() {
				this.overlaylong = "overlaylongright"
				this.overlaytitle = "overlaytitleleft"
 
					this.disfiex = 0
			},
			//使用结构赋值进行异常处理
			promise_error_process(promise){
				return promise.then(data=>[null,data])
								.catch(err=>[err,null])
			},
			async checkUsername(username){
				const response = await axios({
					url 			: 'http://localhost:8081/ajax/users',
					method  		: 'GET',
					withCredentials : true,
					params			:{
						username : username
					}
				})
				return response;
			},
			async checkSignIn(username,password){
				const response = await axios({
					url 			: 'http://localhost:8081/login',
					method  		: 'POST',
					withCredentials : true,
					headers			: {
    				'Content-Type': 'application/x-www-form-urlencoded'
  					},
					data 			: {
						username : username,
						password : password
					}
				})
				return response; 
			},
			async checkRegister(){
				const response = await axios({
					url				: 'http://localhost:8081/users',
					method			: 'POST',
					withCredentials : true,
					headers			: {
    				'Content-Type'	: 'application/x-www-form-urlencoded'
  					},
					data			: this.formData
				})
				return response
			},
			async checkSignInUserName(){
				console.log(this.username)
				if(this.username === ''){
					console.log('用户名不能为空！')
					this.usernameMsg='用户名不能为空'
				}
					
				else{
					//通过结构赋值以及async和await进行异步请求
					const [err,data] = await this.promise_error_process(this.checkUsername(this.username))
					if(err){
						console.log('请求异常！')
						this.usernameMsg='用户名错误'
					}
					else if(data){
						console.log('data.data')
						console.log(data.data.data)
						if(data.data.data === 'exist'){
							console.log('用户名正确！')
						}
							
						else{
							this.usernameMsg='用户名错误'
							console.log('用户名错误')
						}
							
					}
				}
			},
			async checkRegisterUserName(){
				console.log(this.formData.username)
				if(this.formData.username === '')
					console.log('用户名不能为空！')
				else{
					//通过结构赋值以及async和await进行异步请求
					const [err,data] = await this.promise_error_process(this.checkUsername(this.formData.username))
					if(err){
						console.log('请求异常！')
					}
					else if(data){
						console.log('data.data')
						console.log(data.data.data)
						if(data.data.data === 'exist')
							console.log('用户名重复！')
						else
							console.log('用户名正确！')
					}
				}
			},
            async signIn(){
				const [err,data] = await this.promise_error_process(this.checkSignIn(this.username,this.password))
				if(err){
					console.log('请求异常！')

				}
				else if(data){
					console.log(data.data.message)
					if(data.data.message === 'SUCCESS')
						{
							localStorage.setItem('token',data.data.data)
							console.log(localStorage.getItem('token'))
							routes.push({name:'Home'})
							
					}
					else{
						console.log(data.data.data)
						this.passwordMsg='用户名或密码错误'
					}
						
				}
            },
			async register(){
				if(this.formData.password === this.formData.repeatpassword){
					const [err,result] = await this.promise_error_process(this.checkRegister())
					if(err){
						console.log('请求异常！')
					}
					else if(result){
						if(result.data.message === 'ERROR')
							console.log(result.data.data)
						else
							console.log("注册成功!")
					}
				}
				else{
					console.log("两次密码不一致！")
				}
			}
		}
	}
</script>

<template>
	<div class="center">
		<h1>Sign in/ register</h1>
		<div class="logon">
			<div :class="overlaylong">
				<div class="overlaylong-Signin" v-if="disfiex == 0">
					<h2 class="overlaylongH2">Sign in</h2>
					<div>
						<input type="text" v-model="username" @blur="checkSignInUserName" placeholder="user">
						<div>{{ usernameMsg }}</div>
					</div>
					<div>
						<input type="password" v-model="password" placeholder="password">
						<div>{{ passwordMsg }}</div>
					</div>
					
					<h3>Forgot your password?</h3>
					<button class="inupbutton" @click="signIn">Sign in</button>
				</div>
				<div class="overlaylong-Signup" v-if="disfiex == 1">
					<h2 class="overlaylongH2">Registered Account</h2>
					<input type="text" v-model="formData.username" @blur="checkRegisterUserName" placeholder="user">
					<input type="password" v-model="formData.password" placeholder="password">
					<input type="password" v-model="formData.repeatpassword" placeholder="repeatpassword">
					<input type="text" v-model="formData.firstname" placeholder="firstname">
					<input type="text" v-model="formData.lastname" placeholder="lastname">
					<input type="text" v-model="formData.address" placeholder="address">
					<input type="text" v-model="formData.city" placeholder="city">
					<input type="text" v-model="formData.phone" placeholder="phone">
					<button class="inupbutton" @click="register">register</button>
				</div>
 
			</div>
			<div :class="overlaytitle">
				<div class="overlaytitle-Signin" v-if="disfiex == 0">
					<h2 class="overlaytitleH2">Hello,Friend!</h2>
					<p class="overlaytitleP">
						Enter your personal details and start journey with us
					</p>
					<div class="buttongohs" @click="Signin">sign up</div>
				</div>
				<div class="overlaytitle-Signup" v-if="disfiex == 1">
					<h2 class="overlaytitleH2">Welcome Back!</h2>
					<p class="overlaytitleP">To keep connected with us please login with your personal info</p>
					<div class="buttongohs" @click="Signup">Sign in</div>
				</div>
			</div>
		</div>
 
	</div>
</template>

<style>
	.center {
		width: 1560px;
		height: 720px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	h1 {
		font-size: 30px;
		color: black;
	}
 
	.logon {
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
		/* position: relative;
		overflow: hidden; */
		width: 768px;
		max-width: 100%;
		min-height: 650px;
		margin-top: 20px;
		display: flex;
		background: -webkit-linear-gradient(right, #4284db, #29eac4);
	}
 
	.overlaylong {
		border-radius: 10px 0 0 10px;
		width: 50%;
		height: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.overlaylongleft {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: #fff;
		transform: translateX(100%);
		transition: transform 0.6s ease-in-out;
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.overlaylongright {
		border-radius: 10px 0 0 10px;
		width: 50%;
		height: 100%;
		background-color: #fff;
		transform: translateX(0%);
		transition: transform 0.6s ease-in-out;
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
	.overlaytitle {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
	}
 
 
	.overlaytitleH2 {
		font-size: 30px;
		color: #fff;
		margin-top: 20px;
	}
 
	.overlaytitleP {
		font-size: 15px;
		color: #fff;
		margin-top: 20px;
	}
 
	.overlaytitleleft {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateX(0%);
		transition: transform 0.6s ease-in-out;
	}
 
	.overlaytitleright {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateX(-100%);
		transition: transform 0.6s ease-in-out;
	}
 
	.overlaytitle-Signin {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	.overlaytitle-Signup {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	.buttongohs {
		width: 180px;
		height: 40px;
		border-radius: 50px;
		border: 1px solid #fff;
		color: #fff;
		font-size: 15px;
		text-align: center;
		line-height: 40px;
		margin-top: 40px;
	}
 
	.overlaylongH2 {
		font-size: 25px;
		color: black;
		/* width: 250px; */
	}
 
	.overlaylong-Signin {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	.overlaylong-Signup {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	input {
		background-color: #eee;
		border: none;
		padding: 12px 15px;
		margin: 10px 0;
		width: 240px;
	}
	h3{
		font-size: 10px;
		margin-top: 10px;
		cursor: pointer;
	}
	.inupbutton{
		background-color: #29eac4;
		border: none;
		width: 180px;
		height: 40px;
		border-radius: 50px;
		font-size: 15px;
		color: #fff;	
		text-align: center;
		line-height: 40px;
		margin-top: 30px;
	}
</style>
 
